feat(react-icons-atomic-webpack-loader): reroute SVG-only color icons off font variants#1137
Merged
Merged
Conversation
… off font variants Color variants (*Color) are SVG-only because their gradients cannot be represented in an icon font, so the font builds ship no color glyphs. Previously, importing a Color icon under iconVariant: 'fonts' rewrote it to a nonexistent /fonts/<icon> atom, breaking the build. The loader now resolves variants per specifier and reroutes Color imports off color-less variants using the iconVariant -> fallbackVariant -> svg precedence, constrained to color-capable variants (svg, svg-sprite). Headless-ness is preserved, since the headless svg build also ships color atoms. Non-color siblings in the same import statement are unaffected. Adds a colorVariants descriptor field and resolveColorVariant policy, unit tests, and svg/headless webpack integration fixtures. Documents the behavior with a resolution-flow diagram in the README.
📋 PR Validation SummaryCheck the Build react library job summary for detailed reports:
|
dmytrokirpa
approved these changes
Jul 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Color variants (
*Color) are SVG-only — their gradients cannot be represented in an icon font, so the font builds ship no color glyphs. Before this change, importing a Color icon undericonVariant: 'fonts'rewrote it to a nonexistent/fonts/<icon>atom, producing a broken import (export 'AddCircleColor' was not found).The atomic loader now resolves variants per specifier and reroutes Color imports off color-less variants, so they always land on a build that actually ships color atoms.
Behavior
For a
*Colorimport, the resolved variant follows the sameiconVariant → fallbackVariant → svgprecedence as module-level resolution, constrained to color-capable variants (svg,svg-sprite):iconVariantfallbackVariantAddCircleColorresolves tofontssvg(warning)fontssvg-spritesvg-sprite(warning)fontsfontssvg(warning)svg-spritesvg-sprite(unchanged)svgsvg(unchanged)import { AddFilled, AddCircleColor }underfontssplits into/fonts/add+/svg/add-circle.headless + fontsroutes Color icons to/headless/svg/<icon>.svg-spritealready supports color, so those imports are left untouched.Implementation
colorVariantsfield toModuleDescriptor(parallelsheadlessVariants): react-icons →['svg', 'svg-sprite'], react-brand-icons →['svg'].resolveColorVariant()policy andisColorIconName()(derived from the canonical suffix regex).transform.tsnow resolves per specifier with a${module}:${isColor}cache key and dedupes diagnostics by message.Tests & docs
color-fonts-importsandcolor-headless-fonts-importswebpack integration fixtures.buildandprettierare clean.